<template>
        <van-tabs v-model="partId"  @click='changePart'>
            <van-tab v-for="item in brotherCategory" :title="item.name" :key='item.id'>
                <h2>{{item.name}}</h2>
                <p>{{item.front_desc}}</p>
                <ul>
                    <li v-for='item in partArr' :key='item.id'>
                        <img :src="item.list_pic_url" alt="">
                        <p>{{item.name}}</p>
                        <span>￥{{item.retail_price}}元</span>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
</template>

<script>
// 引入接口（获取所有项，获取某一项）
import {getChannel,getPart} from '@/api/channelApi';
    export default {
        name:'',
        data () {
            return {
                partId:'',//每一项的id
                brotherCategory:"",//所有选项种类
                partArr:'',//每一项对应的数据
            }
        },
        created(){
            // 传过来的id
            this.partId = this.$route.query.id
            // 获取所有数据
            getChannel({id:this.$route.query.id}).then(res=>{
                this.brotherCategory = res.data.data.brotherCategory

                 this.brotherCategory.forEach((item, index) => {
                    if (this.$route.query.id == item.id) {
                        this.partId = index; //  当前选中的类下标
                    }
                });
            })
            // 初始化数据,调用获取某一项的接口
            getPart({categoryId:this.$route.query.id}).then(res=>{
                this.partArr = res.data.data.goodsList
            })
        },
        methods:{
            changePart(id1){//id是012345678
                // 调用获取每一项的接口，传的id是当前点击的项的id
                // this.brotherCategory[id1]表示获取的哪几项，用它里面的id去调接口
                getPart({categoryId:this.brotherCategory[id1].id}).then(res=>{
                    this.partArr = res.data.data.goodsList
                })
            }
        }
    }

</script>

<style scoped lang='less'>
h2{
    width: 100%;
    height: 50px;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
}
p{
    width: 100%;
    height:30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
}
ul{
    width: 100%;
    padding: 10px;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    li{
        width: 174px;
        height: 251px;
        img{
            width: 174px;
            height: 174px;
        }
        p{
            width: 100%;
            height: auto;
            line-height: 20px;
            text-align: center;
        }
        span{
            margin-top: 5px;
            display: block;
            font-size: 16px;
            text-align: center;
            color: rgb(139, 0, 0);
        }
    }
}
</style>